<template>
    <article class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 种族比例</header>
            <div class="chartBox clearfix">
                <article>
                    <div class="regionType-button clearfix" v-show="!chartNoDataShow">
                        <el-button-group>
                            <el-button type="primary" v-for="(item, key, index) in RaceData" :key="index" v-if="item" size="mini" @click="regionTypeChange(key)">{{regionTranslation(key)}}</el-button>
                        </el-button-group>
                    </div>
                    <div class="chart-div" id="Race-chart" v-show="!chartNoDataShow"></div>
                </article>
                <h4 v-show="chartNoDataShow">暂未查询到数据！</h4>
            </div>
            <p v-show="false">{{getRace}}</p>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                RaceData: null,//种族数据
                stateRaceData: null,//州——种族数据
                cityRaceData: null,//城市——种族数据
                zipRaceData: null,//邮编——种族数据
                countyRaceData: null,//郡县——种族数据
                neighbourhoodRaceData: null,//附近——种族数据

                myEcharts: '',//种族比例——饼图
                regionType: 'state',//地区级别

                chartNoDataShow: false, //判断是否有无数据
            }
        },
        computed: {
            getRace() {
                if(this.$store.getters.get_homejunctionData.race){
                    this.RaceData = this.$store.getters.get_homejunctionData.race;
                    this.stateRaceData = this.$store.getters.get_homejunctionData.race.state;
                    this.cityRaceData = this.$store.getters.get_homejunctionData.race.city;
                    this.zipRaceData = this.$store.getters.get_homejunctionData.race.zip;
                    this.countyRaceData = this.$store.getters.get_homejunctionData.race.county;
                    this.neighbourhoodRaceData = this.$store.getters.get_homejunctionData.race.neighbourhood;

                    this.$nextTick(() => {
                        this.myEcharts = echarts.getInstanceByDom(document.getElementById('Race-chart'));
                        if (this.myEcharts === undefined) {
                            this.myEcharts = echarts.init(document.getElementById('Race-chart'));
                        }
                        this.myEcharts.showLoading();
                        window.addEventListener('resize', () => {
                            this.myEcharts.resize();
                        });

                        this.get_Race();
                    })
                }
                return this.$store.getters.get_homejunctionData.race
            }
        },
        created() {
        },
        mounted() {

        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //获取种族比例数据
            get_Race() {
                this.$nextTick(() => {
                    if(this.RaceData){
                        this.chartNoDataShow = false;
                        this.Race_charts(this.stateRaceData.asian, this.stateRaceData.black, this.stateRaceData.natives, this.stateRaceData.white, this.stateRaceData.hispanic);
                    }else{
                        this.chartNoDataShow = true;
                        this.$refs.Race_chart_NoData.innerText = data.msg;
                    }
                })
            },
            //地区级别Change事件
            regionTypeChange(value){
                if (value == 'state') {
                    this.Race_charts(this.stateRaceData.asian, this.stateRaceData.black, this.stateRaceData.natives, this.stateRaceData.white, this.stateRaceData.hispanic);
                }else if (value == 'city') {
                    this.Race_charts(this.cityRaceData.asian, this.cityRaceData.black, this.cityRaceData.natives, this.cityRaceData.white, this.stateRaceData.hispanic);
                }else if (value == 'zip') {
                    this.Race_charts(this.zipRaceData.asian, this.zipRaceData.black, this.zipRaceData.natives, this.zipRaceData.white, this.stateRaceData.hispanic);
                }else if (value == 'county') {
                    this.Race_charts(this.countyRaceData.asian, this.countyRaceData.black, this.countyRaceData.natives, this.countyRaceData.white, this.stateRaceData.hispanic);
                }else if (value == 'neighbourhood') {
                    this.Race_charts(this.neighbourhoodRaceData.asian, this.neighbourhoodRaceData.black, this.neighbourhoodRaceData.natives, this.neighbourhoodRaceData.white, this.stateRaceData.hispanic);
                }
            },
            //种族比例——饼图
            Race_charts(asian, black, natives, white, hispanic){
                let other = 100 - asian - black - natives - white;
                let calcHispanic = other * (hispanic / 100);
                let calcOther = 100 - asian - black - natives - white - calcHispanic;

                this.myEcharts.hideLoading();
                this.myEcharts.setOption({
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/> <span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#00b8ee'></span> {b}: {c}%"
                    },
                    legend: {
                        orient: 'horizontal',
                        left: '20',
                        data: ['亚裔', '黑人', '土著/原住民', '白人', '西班牙裔', '其他人种']
                    },
                    series : [{
                        name: '种族比例',
                        type: 'pie',
                        radius :  ['20%', '40%'],//圆的内外半径
                        center: ['50%', '60%'],//圆的X,Y轴平移
                        data:[
                            {
                                value: asian,
                                name: '亚裔',
                            },
                            {
                                value: black,
                                name: '黑人',
                            },
                            {
                                value: natives,
                                name: '土著/原住民',
                            },
                            {
                                value: white,
                                name: '白人',
                            },
                            {
                                value: this.$accounting.formatMoney(calcHispanic, "", 2),
                                name: '西班牙裔',
                            },
                            {
                                value: this.$accounting.formatMoney(calcOther, "", 2),
                                name: '其他人种',
                            },
                        ],
                        //高亮的扇区和标签样式
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label:{
                            formatter:'{b}：{c}%'
                        }
                    }],
                    color: ['#40c3f9', '#ffbf53', '#fe5960', '#00bc7b', '#f963a0', '#cacbcc'],
                });
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
</style>
